<template>
   <div>
      <h3>用户管理台区</h3>
      <x-button type="primary" @click.native="back">返回</x-button>
      <x-table>
         <thead>
            <tr class="table-header">
               <th>归属地</th>
               <th>台区号</th>
               <th>台区地址</th>
            </tr>
         </thead>
         <tbody>
           <tr v-if="data.length==0" class="table">
               <td>暂无数据</td>
               <td>暂无数据</td>
               <td>暂无数据</td>
            </tr>
            <tr v-for="item in data" :key="item.id" class="table">
               <td>{{item.location}}</td>
               <td>{{item.areaNo}}</td>
               <td>{{item.address}}</td>
            </tr>
         </tbody>
      </x-table>
      <loading :show="showLoading" text="加载中..."></loading>
   </div>
</template>

<script>
import { XTable, XButton, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    XTable,
   XButton, Loading
  },
  data() {
    return {
      showLoading:false,
      data: []
    };
  },
  mounted() {
    this.getId();
  },

  watch:{
    data:function(){
      this.showLoading = false
    }
  },

  methods: {
    getId() {
      const id = this.$route.query.id;
      this.getData(id);
    },
    getData(id) {
      this.showLoading = true
      const self = this;
      const param = { userId: id };
      const url = "/yitai/admin/user/userAreas";
      const success = function(response) {
     
        self.data = response.data.info;
      };
      const failed = function() {
      
      };
      Http.http(url, param, success, failed);
    },

    back() {
      this.$router.go(-1);
    },
    
  }
};
</script>

<style scoped>
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
  margin-bottom: 20px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}



.vux-table:after {
  border-top: 1px solid #888888;
}
.vux-table td:before,
.vux-table th:before {
  border-bottom: 1px solid #888888;
}
.vux-table td:after,
.vux-table th:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #888888;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
.table-header th {
  font-weight: bold;
  font-size: 18px;
}
.table {
  font-size: 18px;
}
.table td {
  padding: 8px 2px;
  text-align: center;
  line-height: 30px;
}
</style>